<template>
  <div class="box">
    <label>
      <span>登录名</span>
      <input class="input" type="text" v-model="user.username" />
    </label>
    <label>
      <span>密码</span>
      <input class="input" type="password" v-model="user.password" />
    </label>
    <label class="button">
      <input type="button" value="登录" @click="doLogin()" />
    </label>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    doLogin() {
      // $.post("http://139.196.82.122:8080/api/v1/admin/user/login",{
      //   username:this.user.username,
      //   password:this.user.password
      // });
      $.post(
        "http://139.196.82.122:8080/api/v1/admin/user/login",
        this.user,
        (result) => {
          // console.log(result);
          if (result.code != 200) {
            alert(result.msg);
            return;
          }
          // 把登录信息存下来，给全局守卫进行判断
          localStorage.setItem("userToken", result.token);
          this.$router.push({
            name: "about",
          });
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 8px 0 #333;
  display: flex;
  flex-flow: column nowrap;
}
.box label {
  display: flex;
  flex-flow: row nowrap;
  padding: 14px;
}
.box span {
  display: inline-block;
  width: 60px;
  text-align: justify;
  text-align-last: justify;
  margin-right: 10px;
}
.button {
  justify-content: center;
}
</style>
